<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新生注册</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $.get("grade/find",function (r) {
               let g=$("#gradeid");
               $.each(r.data,function(i,d){
                   g.append(new Option(d.gname,d.id));
               });
            });
           $("form").submit(function () {
               //
               var formData = new FormData($("#addForm")[0]);
               $.ajax({
                   cache: true,
                   type: "post",
                   url: "student/add",
                   async: false,
                   data: formData, // 你的formid
                   contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                   processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                   error: function(request) {
                       alert(request.responseText);
                   },
                   success: function(ret) {
                       console.log(">>>"+ret);
                       if (ret.success) {
                           alert('新生注册成功');
                           window.location.href = "student.html";
                       } else {
                          alert(ret.msg);
                       }
                   }
               });
               //
               return false;
           });
        });
    </script>
</head>
<body>
<form method="post" id="addForm" action="${pageContext.request.contextPath}/student/add"  enctype="multipart/form-data">
    <h1>新生注册</h1>
    <div>
        <label for="sname">姓名：</label>
        <input type="text" name="sname" id="sname" required/>
        <span>*请输入学生姓名</span>
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
        <input type="radio" name="sex" value="妖">妖
        <input type="radio" name="sex" value="人妖">人妖
    </div>
    <div>
        <label for="birth">生日：</label>
        <input type="date" name="birthday" id="birth">
        <span>*请选择日期</span>
    </div>
    <div>
        <label for="tele">电话：</label>
        <input type="text" name="telephone" id="tele" pattern="^1[0-9]{10}$">
        <span>*请输入电话</span>
    </div>
    <div>
        <label for="qq">QQ：</label>
        <input type="text" name="qq" id="qq" pattern="^[0-9]*$">
        <span>*请输入QQ</span>
    </div>
    <div>
        <label for="wechat">微信：</label>
        <input type="text" name="wechat" id="wechat" pattern="^\w*$">
        <span>*请输入微信</span>
    </div>

    <div>
        <label for="gradeid">年级：</label>
        <select name="gradeid" id="gradeid">
              <!--  <option value="1">高一</option>-->
        </select>
        <span>*请选择年级</span>
    </div>
    <div>
        <label for="enterDate">入学日期：</label>
        <input type="date" name="enterdate" id="enterDate">
        <span>*请选择日期</span>
    </div>
    <div>
        <label for="city">城市：</label>
        <input type="text" name="city" id="city">
        <span>*请输入城市</span>
    </div>
    <div>
        <label for="address">地址：</label>
        <input type="text" name="address" id="address">
        <span>*请输入住址</span>
    </div>
    <div>
        <label for="pass">密码：</label>
        <input type="text" name="pass" id="pass">
        <span>*请输入密码</span>
    </div>
    <div>
        <label for="idpic">证件照：</label>
        <input type="file" name="file" id="idpic" onchange="setImagePreviews(this)">
        <span>*请上传文件</span>
        <div id="imgbox"></div>
    </div>
    <p>
        <input type="submit" value="注册"/>
    </p>
</form>
</body>
</html>